<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>迭代器模式（Iterator Pattern）</title>
    <!-- 
    迭代器模式（Iterator Pattern）是一种行为型设计模式，它提供了一种方法来顺序访问一个集合对象中的元素，而无需暴露该对象的内部表示。迭代器模式允许客户端以统一的方式遍历不同类型的集合，简化了集合的访问。

  ### 迭代器模式的主要组成部分

  1. **迭代器接口（Iterator）**：定义了访问和遍历集合元素的方法，如 `next()`, `hasNext()` 等。
  2. **具体迭代器（Concrete Iterator）**：实现迭代器接口，维护对集合的引用，并提供具体的遍历逻辑。
  3. **聚合接口（Aggregate）**：定义创建迭代器的方法。
  4. **具体聚合（Concrete Aggregate）**：实现聚合接口，返回一个具体的迭代器实例。

  ### 迭代器模式的优点

  1. **分离遍历和集合的实现**：客户端代码可以使用迭代器遍历集合，而无需知道集合的具体实现。
  2. **支持多种遍历方式**：可以为同一集合提供多种不同的迭代器，支持不同的遍历方式。
  3. **简化代码**：通过使用迭代器，可以简化对集合的访问和操作。

  ### 迭代器模式的缺点

  1. **增加了系统的复杂性**：引入迭代器可能会导致代码结构变得复杂，特别是在需要实现多个迭代器的情况下。
  2. **性能开销**：在某些情况下，使用迭代器可能会引入额外的性能开销。

  ### 示例代码

  以下是一个使用迭代器模式的简单示例，展示如何遍历一个集合。

  #### 1. 迭代器接口（Iterator）

  ```javascript
  class Iterator {
      next() {
          throw new Error("此方法必须被实现。");
      }

      hasNext() {
          throw new Error("此方法必须被实现。");
      }
  }
  ```

  #### 2. 具体迭代器（Concrete Iterator）

  ```javascript
  class ConcreteIterator extends Iterator {
      constructor(aggregate) {
          super();
          this.aggregate = aggregate; // 持有聚合对象的引用
          this.currentIndex = 0; // 当前索引
      }

      next() {
          return this.aggregate.items[this.currentIndex++];
      }

      hasNext() {
          return this.currentIndex < this.aggregate.items.length;
      }
  }
  ```

  #### 3. 聚合接口（Aggregate）

  ```javascript
  class Aggregate {
      createIterator() {
          throw new Error("此方法必须被实现。");
      }
  }
  ```

  #### 4. 具体聚合（Concrete Aggregate）

  ```javascript
  class ConcreteAggregate extends Aggregate {
      constructor() {
          super();
          this.items = []; // 存储集合元素
      }

      add(item) {
          this.items.push(item); // 添加元素
      }

      createIterator() {
          return new ConcreteIterator(this); // 返回具体迭代器
      }
  }
  ```

  #### 5. 使用示例

  ```javascript
  const aggregate = new ConcreteAggregate();
  aggregate.add("元素1");
  aggregate.add("元素2");
  aggregate.add("元素3");

  const iterator = aggregate.createIterator();

  while (iterator.hasNext()) {
      const item = iterator.next();
      console.log(item); // 输出: 元素1, 元素2, 元素3
  }
  ```

  ### 总结

  迭代器模式是一种强大的设计模式，适用于需要遍历集合对象的场景。通过将遍历逻辑与集合的实现分离，迭代器模式提高了代码的灵活性和可维护性。在设计系统时，合理运用迭代器模式可以简化集合的访问方式，增强代码的可读性。
    -->
  </head>
  <body>
    <script>
      // 迭代器模式是一种行为设计模式，它提供了一种方法来访问集合中的元素，而不暴露集合的内部表示。迭代器模式将遍历集合的逻辑与集合本身分离，使得我们可以以统一的方式遍历不同的集合。

      // 迭代器模式的主要组成部分包括：
      // 1. 迭代器接口（Iterator）：定义了访问和遍历集合元素的方法。
      // 2. 具体迭代器（Concrete Iterator）：实现了迭代器接口，具体实现了遍历集合的逻辑。

      class Iterator {
        constructor(conatiner) {
          this.container = container;
          this.index = 0;
        }

        next() {
          if (this.hasNext()) {
            return this.container[this.index++];
          }
          return null;
        }

        hasNext() {
          return this.index < this.container.length;
        }
      }

      class ConcreteAggregate {
        constructor() {
          this.items = [];
        }

        getIterator() {
          return new Iterator(this.items);
        }

        add(item) {
          this.items.push(item);
        }
      }

      let aggregate = new ConcreteAggregate();
      aggregate.add("元素1");
      aggregate.add("元素2");
      aggregate.add("元素3");

      let iterator = aggregate.getIterator();
      while (iterator.hasNext()) {
        let item = iterator.next();
        console.log(item); // 输出: 元素1, 元素2, 元素3
      }
    </script>
  </body>
</html>
